<template>
  <div class="mod-config">
    <basic-container>
      <!-- <navigation :sign="{a:false,b:false,c:true,d:false,e:false}"></navigation> -->
      <div class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">二级领导年奖设置</div>
          <div class="tablelink">
            <span
              style="float: right; cursor: pointer"
              @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
                  <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
              </span>
          </div>
        </div>
        <div v-show="searchadvanced">
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="form-inline">
            <el-form-item label="姓名">
              <el-input v-model="dataForm.ryXm" placeholder="姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="员工编号">
              <el-input v-model="dataForm.ryCode" placeholder="员工编号"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
              <el-cascader v-model="departmentSelect" :options="departmentOptions"
                           :props="{ multiple: true, checkStrictly: true, expandTrigger: 'hover', value:'id', label:'name' }"
                           clearable></el-cascader>
            </el-form-item>
            <el-form-item label="考核等级">
              <el-select :clearable="true" v-model="dataForm.config03" placeholder="请选择" class="xiaLa wbf90">
                <el-option v-for="(item,index) in userKhdjOptions " :key="index" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职级">
              <el-select :clearable="true" v-model="dataForm.ryZwjbbh" placeholder="请选择" class="xiaLa wbf90">
                <el-option v-for="(item,index) in userZjOptions " :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="dataForm.ryZhiwei" placeholder="岗位"></el-input>
            </el-form-item>
            <el-form-item label="负责部门：">
              <el-select v-model="dataForm.deptId" placeholder="请选择负责部门" class="xiaLa" style="width: 300px"
                         @change="switchDepartment">
                <el-option v-for="(item,index) in fzbmData" :key="index" :label="item.deptName"
                           :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="marginLeft" plain @click="getDataList(1)">检索</el-button>
            </el-form-item>
          </el-form>
        </div> -->
        <div>
          <el-tooltip
            class="item"
            effect="dark"
            content="导入"
            placement="top"
          >
            <el-upload class="upload-demo"  :show-file-list="false"
                       accept=".xlsx, .xls" :headers="headers" action="/admin/sys-file/upload" style="float:left;margin-right:10px;" :on-success="handleUploadSuccess">
              <el-button  icon="el-icon-upload" type="success" circle></el-button>
            </el-upload>

          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="导出"
            placement="bottom"
          >
            <el-button type="warning" icon="el-icon-download" @click="excelExportHandleDown('领导正职配置')" circle></el-button>
          </el-tooltip>
        </div>
        <el-table :data="dataList" ref="table" border v-loading="dataListLoading"
                  class="avue-crud">
          <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
          <el-table-column prop="" header-align="center" align="center" label="序号" width="80"
                           :formatter="nShowIndex"></el-table-column>
          <el-table-column  min-width="100" header-align="center" prop="ryEjdw" label="机构名称" align="center"></el-table-column>
          <el-table-column  min-width="150" header-align="center" label="绩效年薪基数" align="center">
              <template slot-scope="scope">
                  <el-input-number placeholder="" @change="changeRen(scope.row,'jxNxjs')" v-model="scope.row.jxNxjs" style="width:100%;"></el-input-number>
              </template>
          </el-table-column>
          <!-- <el-table-column  min-width="150" header-align="center" prop="ryXm" label="拟定正职人员标准" align="center">
              <template slot-scope="scope">
                  <el-input placeholder="" v-model="scope.row.ryXm" readonly @focus="changeRen(scope.row,'ryXm')" style="width:100%;"></el-input>
              </template>
          </el-table-column> -->
          <el-table-column  min-width="150" header-align="center" prop="jgkhfj" label="考核分级" align="center">
              <template slot-scope="scope">
                  <el-select  v-model="scope.row.jgkhfj" :disabled="scope.row.ryEjdwId==142||scope.row.ryEjdwId==144" @change="changeRen(scope.row,'jgkhfj')" clearable placeholder="">
                    <el-option v-for="item in khfjList" :label="item.label" :value="item.value"></el-option>
                  </el-select>
              </template>
          </el-table-column>
          <el-table-column  min-width="150" header-align="center" prop="jgfs" label="综合业绩分值" align="center">
              <template slot-scope="scope">
                  <el-input-number placeholder="" v-model="scope.row.jgfs"  :disabled="scope.row.ryEjdwId==142||scope.row.ryEjdwId==144"  @change="changeRen(scope.row,'jgfs')" style="width:100%;"></el-input-number>
              </template>
          </el-table-column>
          <el-table-column  min-width="100" header-align="center" label="副职年薪标准" align="center">
              <template slot-scope="scope">
                  <el-input-number placeholder="" @change="changeRen(scope.row,'fzNxbz')" v-model="scope.row.fzNxbz" style="width:100%;"></el-input-number>
              </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                         :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <!-- 人员选择 -->
    <check-user ref="checkUser" :multiple='false' :roleCode="roleCode" :userIds='checkUserIds' @getUserList="getUserCheck"></check-user>
    </basic-container>
  </div>
</template>

<script>
import checkUser from '@/components/form/compound/selectRyxx'
import {
    fnpage,
updateJiangjinEjdwpz
} from '@/api/jiangjin/jiangjinBaseSalary.js'
import request from "@/router/axios";
import store from "@/store";
export default {
    components:{
      checkUser
    },
    data(){
        return{
            headers: {
              Authorization: 'Bearer ' + store.getters.access_token
            },
            // 查询条件隐藏/显示相关
            searchheight: "0",
            searchadvanced: true,
            dataForm:{},
            dataList:[{}],
            dataListLoading:false,
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            checkUserIds:[],
            roleCode:'',
            rowObj:{},
            khfjList:[
              {label:"A",value:"A"},
              {label:"B",value:"B"},
              {label:"C",value:"C"},
              {label:"D",value:"D"},
            ]
        }
    },
    created(){
        this.getDataList()
    },
    methods:{
        getDataList(){
            fnpage(Object.assign({
                current: this.pageIndex,
                size: this.pageSize
                })).then(res=>{
                    this.dataList=res.data.data.records
                    this.totalPage=res.data.data.total
              })
        },
        changeRen(row,flag){
            this.rowObj=row
            this.roleCode = "";
            this.checkUserIds = [];
            this.checkUserIds.push(this.getBlankValue(this.dataForm.ryCode));
            // this.checkUserIds = ["00380359","00392362","00397655"];
            if(flag=='ryXm'){
                //防止数据慢于页面加载
                this.$nextTick(()=>{
                    this.$refs.checkUser.init();
                })
            }else{
                var data=this.$refs.table.selection
                var list=[]
                if(data.length==0){
                    list.push(this.rowObj)
                }else{
                    data.forEach(item => {
                        item[flag]=this.rowObj[flag]
                        list.push(item)
                    });
                }
                this.fnupdateJiangjinEjdwpz(list)
            }

        },
        fnupdateJiangjinEjdwpz(data){
            updateJiangjinEjdwpz(data).then(res=>{
                    this.$message.closeAll()
                    this.$message.success('保存成功!')
                    this.pageIndex=1
                    this.getDataList()
                })
        },
        //取得空值 增加弹错判断
        getBlankValue(value){
            let lResult = "";
            if(value === undefined || value === null){
            }else {
            lResult = value;
            }
            return lResult;
        },
        nShowIndex(row, column, cellValue, index) {
            return index + 1 + this.pageSize * (this.pageIndex - 1);
        },
        getUserCheck(row){
            this.$set(this.rowObj,'ryCode',row[0].ryCode)
            this.$set(this.rowObj,'ryXm',row[0].ryXm)
            var data=this.$refs.table.selection
                var list=[]
                if(data.length==0){
                    list.push(this.rowObj)
                }else{
                    data.forEach(item=>{
                        item['ryCode']=row[0].ryCode
                        item['ryXm']=row[0].ryXm
                        list.push(item)
                    })
                }
               this.fnupdateJiangjinEjdwpz(list)
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if (this.searchadvanced) {
                this.searchheight = "50";
            }
        },
        handleUploadSuccess(response, file, fileList) {
          this.$message.closeAll()
          if (response.code == 0) {
            request({
              url: '/jiangjin/jiangjinEjdwpz/importryByEjdwpz/' + response.data.bucketName + '/' + response.data.fileName ,
              method: 'get',
            }).then((response) => { //
              var obj = response;
              //this.loading.close()
              this.getDataList()
            }).catch(() => {
              //this.loading.close();


            });

          } else {
            // this.loading.close();
            this.$message.error("数据导入错误请联系管理员")
            this.$message.error('上传出错：' + response.msg)
          }
        },
        excelExportHandleDown(filename){
          return request({
            url: '/jiangjin/jiangjinEjdwpz/exportByEjdwpz',
            method: 'post',
            responseType: 'arraybuffer'
          }).then((response) => { // 处理返回的文件流
            const blob = new Blob([response.data], {
              type: 'application/vnd.ms-excel'
            })
            const link = document.createElement('a')
            link.href = URL.createObjectURL(blob)
            link.download = filename
            document.body.appendChild(link)
            link.click()
            window.setTimeout(function () {
              URL.revokeObjectURL(blob)
              document.body.removeChild(link)
            }, 0)
          })
        },

    }
}
</script>

<style>

</style>
